// 查找第一个字符串项的索引
function findName(data) {
	let str = ""
	for (let i = 0; i < data.length; i++) {
		if (typeof data[i] === "string") {
			str = data[i]
		}
	}
	return str
}

export function reorganizeData(data) {
	let result = []
	let currentGroup = []
	let template = []

	for (let i = 0; i < data.length; i++) {
		let group = data[i]
		if (template.length > 0) {
			group = template.concat(group)
			template = []
		}
		if (group.length > 0) {
			// 如果当前子数组的第一项不是字符串
			if (typeof group[0] !== "string") {
				// 从上一个子数组中找到第一个字符串项
				let titleIndex = i - 1
				while (titleIndex >= 0 && data[titleIndex].every(item => typeof item === "object")) {
					titleIndex--
				}
				if (titleIndex >= 0) {
					let name = findName(data[titleIndex])
					currentGroup.push(name)
				}
			}

			// 将当前子数组的数据添加到当前组
			currentGroup.push(...group)

			// 如果当前组的长度超过10，处理当前组
			while (currentGroup.length > 10) {
				let excessData = currentGroup.slice(10)
				result.push(currentGroup.slice(0, 10)) // 添加当前组到结果
				currentGroup = excessData // 更新当前组为移除的数据
			}

			// 如果当前组不为空，添加到结果
			if (currentGroup.length > 0) {
				if (i === 0) {
					result.push(currentGroup)
					//如果是最后一个  并且长度小于11 并且第一条数据是字符串
				} else if (data.length - 1 === i && currentGroup.length < 11 && typeof currentGroup[0] === "string") {
					result.push(currentGroup)
				} else {
					template.push(...currentGroup)
				}
			}

			// 重置当前组为下一个子数组
			currentGroup = []
		}
	}

	if (template.length > 0) {
		result.push(template)
	}

	return [result, template.length > 0]
}

// 中间背景雨
export function rainBg() {
	var c = document.querySelector(".rain")
	var ctx = c.getContext("2d") //获取canvas上下文
	var w = (c.width = document.querySelector(".middle-content").clientWidth)
	var h = (c.height = document.querySelector(".middle-content").clientHeight)
	//设置canvas宽、高

	function random(min, max) {
		return Math.random() * (max - min) + min
	}

	function RainDrop() {}
	//雨滴对象 这是绘制雨滴动画的关键
	RainDrop.prototype = {
		init: function () {
			this.x = random(0, w) //雨滴的位置x
			this.y = h //雨滴的位置y
			this.color = "hsl(180, 100%, 50%)" //雨滴颜色 长方形的填充色
			this.vy = random(4, 5) //雨滴下落速度
			this.hit = 0 //下落的最大值
			this.size = 2 //长方形宽度
		},
		draw: function () {
			if (this.y > this.hit) {
				var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.size * 30)
				// 设置起始颜色
				linearGradient.addColorStop(0, "#14789c")
				// 设置终止颜色
				linearGradient.addColorStop(1, "#090723")
				// 设置填充样式
				ctx.fillStyle = linearGradient
				ctx.fillRect(this.x, this.y, this.size, this.size * 50) //绘制长方形，通过多次叠加长方形，形成雨滴下落效果
			}
			this.update() //更新位置
		},
		update: function () {
			if (this.y > this.hit) {
				this.y -= this.vy //未达到底部，增加雨滴y坐标
			} else {
				this.init()
			}
		}
	}

	function resize() {
		w = c.width = window.innerWidth
		h = c.height = window.innerHeight
	}

	//初始化一个雨滴

	var rs = []
	for (var i = 0; i < 10; i++) {
		setTimeout(function () {
			var r = new RainDrop()
			r.init()
			rs.push(r)
		}, i * 300)
	}

	function anim() {
		ctx.clearRect(0, 0, w, h) //填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
		for (var i = 0; i < rs.length; i++) {
			rs[i].draw() //绘制雨滴
		}
		requestAnimationFrame(anim) //控制动画帧
	}

	window.addEventListener("resize", resize)
	//启动动画
	anim()
}
